import React, { PureComponent } from "react";

export default class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      count: 1,
      music: {
        id: "01001",
        name: "分手快乐！",
      }
    };
  }

  componentDidUpdate() {
    console.log("componentDidUpdate");
  }

  changeCount = () => {
    this.setState({
      count: this.state.count
    });
  };


  changeMusicName=()=>{
    this.setState({
      music:{
        ...this.state.music,
        name:this.state.music.name
      }
    })

  }

  render() {
    console.log("render");
    return (
      <div>
        <h1>性能优化（继承自PureComponent）</h1>
        <p>count:{this.state.count}</p>
        <input type="button" value="修改count" onClick={this.changeCount} />
        <p>歌曲的编号：{this.state.music.id}</p>
        <p>歌名：{this.state.music.name}</p>
        <input type="button" value="修改歌名" onClick={this.changeMusicName} />
      </div>
    );
  }
}
